<template>
	<view class="bottom">
		<view class="item" @click="itemClick(0)">
			<image class="img" src="../../../../static/base-question/question.png"></image>
			<text class="text">顺序答题</text>
		</view>
		<view class="item" @click="itemClick(1)">
			<image class="img" src="../../../../static/base-question/question.png"></image>
			<text class="text">乱序答题</text>
		</view>
		<view class="item" @click="itemClick(3)">
			<image class="img" src="../../../../static/base-question/test.png"></image>
			<text class="text">模拟考试</text>
		</view>
		<view class="item" @click="itemClick(2)">
			<image class="img" src="../../../../static/base-question/mistakes.png"></image>
			<text class="text">错题集训</text>
		</view>
	</view>
</template>

<script setup>
	import {
		useBaseQuestionStore,
		useTestQuestionStore
	} from '@/store';

	// 获取仓库数据
	const baseQuestionStore = useBaseQuestionStore()
	const testQuestionStore = useTestQuestionStore()

	// 点击答题按钮
	// 类型 0 顺序刷题 1逆序刷题 2错题集训 3考试记录
	const itemClick = (mode) => {
		// 获取答题的数据
		baseQuestionStore.getQuestionListAction(mode)
	}
</script>

<style lang="scss">
	.bottom {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.item {
			width: 48%;
			padding: 20rpx 0;
			margin-bottom: 20rpx;
			border-radius: 20rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #F8FAFF;

			.img {
				width: 70rpx;
				height: 70rpx;
			}

			.text {
				margin-left: 14rpx;
				font-family: '黑体';
				color: $text-color;
				font-size: 30rpx;
			}
		}
	}
</style>